import React from 'react'
import PropTypes from 'prop-types'
import { View, LayoutAnimation, Text } from 'react-native'
import CompanyTouchableOpacity from 'src/pageB/company/mine-company/components/CompanyTouchableOpacity'
import showPicker from 'src/utils/PickerUtil'
import styles from '../css/CompanyBodyCss'
import ImageOverlap from 'src/components/image-overlap/index'
import CustomImage from 'src/components/image/CustomImage'
import NavigationUtil from 'src/utils/NavigationUtil'
export default class CompanyBody extends React.PureComponent {
  static propTypes = {
    data: PropTypes.object,
    companyClick: PropTypes.func,
    jumpFn: PropTypes.func,
    CommonInputPage: PropTypes.func,
    jumpCompanyWelfare: PropTypes.func,
    companyId: PropTypes.number,
    getData: PropTypes.func,
    slaveCompanyCheck: PropTypes.func
  }

  constructor(props) {
    super(props)
    this.state = {
      customInputLabels: false
    }
  }

  Album = companyPicUrl => (<ImageOverlap images={companyPicUrl.map((imgUrl) => ({ imgUrl }))} />)

  onClick = () => {
    NavigationUtil.navigate('ConpanyInfo', this.props)
  }

  render() {
    const {
      data = {},
      jumpFn,
      jumpCompanyWelfare
    } = this.props
    const { companyPicUrl = [], canNotEdit } = data
    return (
      <View style={styles.body}>
        <View>
          <CompanyTouchableOpacity
            onPress={this.onClick}
            style={styles.touchableOpacity}
            icon={require('@/imgC/template/baseInfo.png')}
            title="基本信息"
            url={require('@/imgC/template/triangle.png')}
            urlStyle={styles.urlStyle}
            value={`${data.BaseInfoSize || 0}/5`}
          >{canNotEdit && <CustomImage style={styles.lock} source={require('@/imgC/company/lock.png')} />}</CompanyTouchableOpacity>
        </View>
        <View>
          <CompanyTouchableOpacity
            style={styles.touchableOpacity}
            icon={require('@/imgC/template/administrators.png')}
            onPress={() => jumpFn('Administrators')}
            title="公司成员"
            value={(data.memberCount || 1) + '人'}
          />
        </View>
        <View>
          <CompanyTouchableOpacity
            style={styles.touchableOpacity}
            icon={require('@/imgC/template/welfare.png')}
            onPress={() => jumpCompanyWelfare('CompanyWelfare')}
            title="公司福利"
            value={data.benefitsSize || '请选择'}
          />
        </View>
        <View>
          <CompanyTouchableOpacity
            style={styles.touchableOpacity}
            icon={require('@/imgC/template/album.png')}
            onPress={() =>
              jumpFn('CompanyAlbums', { companyPicUrl: companyPicUrl, canEdit: !canNotEdit })
            }
            title="公司相册"
            type={companyPicUrl.length > 0}
            value={
              companyPicUrl.length > 0
                ? ''
                : '去上传'
            }
          >
            {this.Album(companyPicUrl)}
          </CompanyTouchableOpacity>
        </View>
        <View>
          <CompanyTouchableOpacity
            style={styles.touchableOpacity}
            icon={require('@/imgC/template/audit.png')}
            onPress={() => jumpFn('BCompanyApplyFamous')}
            title={data.famousId ? '我的名企' : '名企申请'}
            value={data.famousStatus}
          />
        </View>
      </View>
    )
  }

  toggleMask = showMask => {
    this.setState({
      showMask
    })
  }

  _birthFieldClick = type => {
    if (this.props.slaveCompanyCheck()) {
      return
    }
    this.toggleMask(true)
    const {
      getData,
      data: { companyFinance, companyPerson },
      companyId
    } = this.props
    const years =
      type === 1
        ? ['未融资', '天使轮', 'A轮', 'B轮', 'C轮', 'D轮以上']
        : [
          '0-20人',
          '20-99人',
          '100-499人',
          '500-999人',
          '1000-9999人',
          '10000人以上'
        ]
    const pickerData = years
    const selectedValue =
      type === 1 ? [companyFinance || '未融资'] : [companyPerson || '100-499人']
    const pickerTitleText = type === 1 ? '融资阶段' : '人员规模'
    showPicker({
      pickerData,
      selectedValue,
      pickerTitleText,
      onConfirm: ([gmtBorth]) => {
        const item =
          type === 1
            ? { companyFinance: gmtBorth }
            : { companyPerson: gmtBorth }
        getData(item, item, this.toggleMask, companyId, true)
      }
    })
  }
}
